// 汇聚： 文件 new Image() img => canvas 位图 下载
const fileDom = document.querySelector('input[type=file]')
const generateBtn = document.querySelector('.generate')
const previewImg = document.querySelector('.preview-img')
const shadowImg = document.querySelector('.shadow-img')

generateBtn.onclick = generate

async function generate() {
    const img = await loadImage()
    if (!img) {
        return
    }

    const cvs = document.createElement('canvas')
    cvs.width = img.width
    cvs.height = img.height
    const ctx = cvs.getContext('2d')
    ctx.drawImage(img, 0, 0)

    const bmp = ctx.getImageData(0, 0, img.width, img.height).data

    const shadowCSSFragments = [] // 阴影css的片段
    // 读取每个位图的像素点
    for (let r = 0; r < img.height; r++) {
        for (let c = 0; c < img.width; c++) {
            const i = r * img.width + c
            const R = bmp[i * 4]
            const G = bmp[i * 4 + 1]
            const B = bmp[i * 4 + 2]
            const A = bmp[i * 4 + 3] / 255
            shadowCSSFragments.push(`${c + 1}px ${r}px rgba(${R}, ${G}, ${B}, ${A})`)
        }
    }
    shadowImg.style.boxShadow = shadowCSSFragments.join(',')

    // 生成并下载html
    const html = createHTML(img.width, img.height, bmp)
    download(html)
}

// 根据选择的图片生成图片对象
function loadImage() {
    const file = fileDom.files[0]
    if (!file) {
        return null
    }
    const objUrl = URL.createObjectURL(file)
    previewImg.src = objUrl
    const img = new Image()
    return new Promise((resolve, reject) => {
        img.onload = () => {
            resolve(img)
        }
        img.onerror = () => {
            resolve(null)
        }
        img.src = objUrl
    })
}

function createHTML(width, height, bmp) {
    const shadowCSSFragments = [] // 阴影css的片段
    const shadowCSSHover = [] // 鼠标移入的css阴影
    // 读取每个位图的像素点
    for (let r = 0; r < height; r++) {
        for (let c = 0; c < width; c++) {
            const i = r * width + c
            const R = bmp[i * 4]
            const G = bmp[i * 4 + 1]
            const B = bmp[i * 4 + 2]
            const A = bmp[i * 4 + 3] / 255
            shadowCSSFragments.push(`${c + 1}px ${r}px rgba(${R}, ${G}, ${B}, ${A})`)
            shadowCSSHover.push(`${c + 1}px ${r}px rgba(${255 - R}, ${255 - G}, ${255 - B}, ${A})`)
        }
    }

    return `<!DOCTYPE html>
        <html>
            <head>
                <meta charset="UTF-8">
                <style>
                    .shadow-img {
                        width: ${width}px;
                        height: ${height}px;
                    }
                    .shadow-img .inner {
                        width: 1px;
                        height: 1px;
                        box-shadow: ${shadowCSSFragments.join(',')};
                        transition: 1.5s;
                    }
                    .shadow-img:hover .inner {
                        box-shadow: ${shadowCSSHover.join(',')};
                    }
                </style>
            </head>
            <body>
                <div class="shadow-img">
                    <div class="inner"></div>
                </div>
            </body>
        </html>
    `
}

function download(html) {
    let blob = new Blob([html], { type: 'text/html' })
    let url = URL.createObjectURL(blob)
    let a = document.createElement('a')
    a.href = url
    a.style.display = 'none'
    a.download = 'shadowimg.html'
    a.click()
}